{% extends 'proyectos/base.html' %}

{% block panelizq %}
    <h3>Contenido</h3>
    <ul class="menuv-dropdown dropdown-vertical" id="nav">
        <li class="item-102"><a href="/proyectos/">Mis Proyectos</a></li>
        <li class="item-102 current active"><a href="/grupos/ver/{{ grupo.id }}">Detalle del Grupo</a></li>
        <li class="item-102"><a href="/grupos/">Mis Grupos</a></li>
        <li class="item-119"><a href="/grupos/crear/">Crear Grupo</a></li>
    </ul>
{% endblock panelizq %}

{% block content %}
	<div id="contact_wrap">
		<div id="contact" class="round clearfix">
			<div id="contact-form">
				<h2 style="text-align: center;">Detalles del Grupo</h2>
				<form>
					{% csrf_token %}
					{{ form.as_table }} <br/>

					{% if usuario.id != grupo.creador.id %}
						{% if esMiembro %}
							<input type="button" onclick="location.href='/grupos/salir/{{ grupo.id }}'"
                                   value="Salir del Grupo" style="margin-left: 100px;"/>
						{% endif %}
                    {% else %}
                        <form action="/grupos/borrar/{{ grupo.id }}" method="POST">
							{% csrf_token %}
                            <input type="submit" value="Borrar Grupo" style="margin-left: 105px;"/>
                        </form>
					{% endif %}

					<input type="button" onclick="location.href='/grupos/'"	value="Volver" style="margin-left: 135px;"/>
				</form>

			</div>
		</div>
	</div>

    <script type="text/javascript">
        $("#id_miembros").sexyselect({showTitle:false,allowInput:false,allowFilter:true,allowDelete:false,selectionMode:'multiple',width:330});
    </script>
{% endblock content %}
